<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : mn_100_02.jsp
    Description : 설명을 기술합니다.
    author Seung Hun
    since 2012. 7. 23.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 7. 23.     Seung Hun     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/co/mn/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/co/mn/include/session.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HMC GLOBAL CSR</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=medium-dpi" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="/js/com/usr/jquery-1.7.2.min.js"></script>

<script type="text/javascript"> 
    //<![CDATA[
    if (navigator.userAgent.match(/Mobile/i) == null) {
        var rule = "@font-face {";
                rule += "font-family: 'ModernHBold';";
                rule += "src: url('/font/modernh-bold.eot');";
                rule += "src: url('/font/modernh-bold.eot?#iefix') format('embedded-opentype'),";
                rule += "url('/font/modernh-bold.woff') format('woff'),";
                rule += "url('/font/modernh-bold.ttf') format('truetype'),";
                rule += "url('/font/modernh-bold.svg#modernh-bold') format('svg');";
                rule += "font-weight:bold;";
                rule += "font-style:normal;";
                rule += "}";
                rule += "@font-face {";
                rule += "font-family: 'ModernHMedium';";
                rule += "src: url('/font/modernh-medium.eot');";
                rule += "src: url('/font/modernh-medium.eot?#iefix') format('embedded-opentype'),";
                rule += "url('/font/modernh-medium.woff') format('woff'),";
                rule += "url('/font/modernh-medium.ttf') format('truetype'),";
                rule += "url('/font/modernh-medium.svg#modernh-medium') format('svg');";
                rule += "font-weight:normal;";
                rule += "font-style:normal;";
                rule += "}";
 
        var s = document.createElement('style');
        s.type = "text/css";
        document.getElementsByTagName('head')[0].appendChild(s);
 
        if (s.styleSheet) { // IE
            try {
                s.styleSheet.cssText = rule;
            } catch (e) {
                    throw new(Error)("Couldn't reassign styleSheet.cssText.");
            }
        } else {
            (function (node) {
                if (s.childNodes.length > 0) {
                    if (s.firstChild.nodeValue !== node.nodeValue) {
                        s.replaceChild(node, css.firstChild);
                    }
                } else {
                    s.appendChild(node);
                }
            })(document.createTextNode(rule));
        }
    }
    //]]>
</script>
<link rel="stylesheet" type="text/css" href="/css/usr/respond.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/usr/video.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/css/usr/ie7lte.css" /><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="/css/usr/ie8gte.css" /><![endif]-->
<!--[if gte IE 9]><link rel="stylesheet" type="text/css" href="/css/usr/ie9gte.css" /><![endif]-->
<script type="text/javascript" src="/js/com/usr/respond.min.js"></script>
<script type="text/javascript" src="/js/com/usr/custom.wheel.scrollbar.js"></script>
<script type="text/javascript" src="/js/com/usr/visual.js"></script>
<script type="text/javascript" src="/js/com/usr/projekktor.min.js"></script>
<script type="text/javascript" src="/js/com/usr/ui.js"></script>
<script type="text/javascript"> 
    //<![CDATA[
    $(function(){
        ChkScroll();//check element for scroll event
        ChkGalleryLink();//check mobile for gallery link
 
        if (navigator.userAgent.match(/Mobile/i) == null) {
            projekktor('#mainPlayer', { volume: 0.8, playerFlashMP4: '/img/usr/video/jarisplayer.swf' }, function(player){
                $('.mask, .btnClose > button').click(function(){player.setStop(); return false;})
            });
        }else{
            $(".movieOpen").unbind("click");
        }
        $(".movieLayer").hide();
 
        $("#gnb > .menu > li > a").click(function(){
            var winW = $(window).width();
            if(winW > 720 && winW < 980){
                $(".menu").height($(this).next(".subMenu").outerHeight() + $(this).outerHeight());
            }
            return false;
        });
 
    });
 
    function ChkGnb(){
        var winW = $(window).width();
        if(winW > 720 && winW < 980){
            $(".menu").css("height", $("#gnb > .menu > li.atv").find(".subMenu").outerHeight() + $("#gnb > .menu > li.atv").find("a:eq(0)").outerHeight());
        }else if(winW <= 720){
            var sumH = 0;
            $("#gnb > .menu > li").each(function(i){
                var H = $(this).outerHeight();
                sumH = sumH + H;
            });
            $(".menu").css("height", sumH);
        }else{
            $(".menu").css("height","28px");
        }
    }
 
    function HideLayer(){//hide layer
        $(".mask").click();
    }
 
    window.onorientationchange = HideLayer; //hide layer for ipad orientation
 
    $(window).resize(function(){
        ChkScroll();//check element for scroll event
        if (navigator.userAgent.match(/Mobile/i) == null) { //hide layer for web
            HideLayer();
        }
        ChkGnb();
        //$(".subMenuClose").click();
    });
    //]]>
</script>
<style type="text/css"> 
    /*.movieLayer{display:none;}*/
    .movieLayer, .movieLayPop {position:absolute; left:0; top:0; width:100%; height:100%;}
    .movieLayPop {left:50%; top:50%; width:auto; height:auto; z-index:101;}
    .movieView {position:relative; width:640px; padding:10px; border:1px solid #c1c1c1; background:#fff;}
</style>
</head>
<body>
<div id="wrap">
    <!-- accNav -->
    <div id="accNav"><a href="#container">skip to contents</a></div>
    <!-- /accNav -->
 
    <!-- header -->
    <div id="header">
        <div id="headerArea">
            <div class="topArea">
                <h1><a href="#">HYUNDAI &#124; NEW THINKING, NEW POSSIBLITIES</a></h1>
                <div class="quickArea">
                    <ul class="languagekLink">
                        <li><a href="#">English</a></li>
                        <li><a href="#">Sitemap</a></li>
                    </ul>
                    <div id="searchWrap">
                        <form action="">
                            <fieldset>
                                <legend class="invisible">검색</legend>
                                <input type="text" title="검색어 입력" /><input type="image" src="/img/usr/btn/btn_search.gif" title="검색" alt="검색"  />
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
            <div id="gnb">
                <ul class="menu">
                    <li><a href="#">CSR 소개</a>
                            <div class="subMenu">
                                <p>CSR 소개</p>
                                <ul>
                                    <li><a href="#">현대자동차 CSR</a></li>
                                    <li><a href="#">철학과 구조</a></li>
                                    <li><a href="#">심볼과 슬로건</a></li>
                                </ul>
                                <p class="subMenuClose"><button type="button"><img src="/img/usr/btn/btn_gnb_close.gif" alt="sub menu close" /></button></p>
                            </div>
                    </li>
                    <li><a href="#">지속가능경영</a>
                            <div class="subMenu">
                                <p>지속가능경영</p>
                                <ul>
                                    <li><a href="#">개요</a></li>
                                    <li><a href="#">경제</a></li>
                                    <li><a href="#">환경</a></li>
                                    <li><a href="#">사회</a></li>
                                </ul>
                                <p class="subMenuClose"><button type="button"><img src="/img/usr/btn/btn_gnb_close.gif" alt="sub menu close" /></button></p>
                            </div>
                    </li>
                    <li><a href="#">사회공헌</a>
                            <div class="subMenu">
                                <p>사회공헌</p>
                                <ul>
                                    <li><a href="#">공모사업</a></li>
                                    <li><a href="#">4대무브</a></li>
                                    <li><a href="#">글로벌 사회공헌</a></li>
                                    <li><a href="#">대륙별 사회공헌</a></li>
                                </ul>
                                <p class="subMenuClose"><button type="button"><img src="/img/usr/btn/btn_gnb_close.gif" alt="sub menu close" /></button></p>
                            </div>
                    </li>
                    <li><a href="#">CSR 자료실</a>
                            <div class="subMenu">
                                <p>CSR 자료실</p>
                                <ul>
                                    <li><a href="#">공지&#47;이벤트</a></li>
                                    <li><a href="#">CSR 소식</a></li>
                                    <li><a href="#">참여후기</a></li>
                                    <li><a href="#">보고서 다운로드</a></li>
                                    <li><a href="#">포토갤러리</a></li>
                                    <li><a href="#">뉴스레터</a></li>
                                </ul>
                                <p class="subMenuClose"><button type="button"><img src="/img/usr/btn/btn_gnb_close.gif" alt="sub menu close" /></button></p>
                            </div>
                    </li>
                </ul><p class="subSeeAll"><button type="button" class="wholeOpen"><img src="/img/usr/btn/btn_gnb_total.gif" alt="전체보기" /></button></p>
            </div>
            <div class="whole">
                <p class="figure"><img src="/img/usr/common/gnb_hyundai.jpg" alt="" /></p>
                <ul>
                    <li><a href="#">현대자동차 CSR</a></li>
                    <li><a href="#">철학과 구조</a></li>
                    <li><a href="#">심볼과 슬로건</a></li>
                </ul>
                <ul>
                    <li><a href="#">개요</a></li>
                    <li><a href="#">경제</a></li>
                    <li><a href="#">환경</a></li>
                    <li><a href="#">사회</a></li>
                </ul>
                <ul>
                    <li><a href="#">공모사업</a></li>
                    <li><a href="#">4대 무브</a></li>
                    <li><a href="#">글로벌 사회공헌</a></li>
                    <li><a href="#">대륙별 사회공헌</a></li>
                </ul>
                <ul>
                    <li><a href="#">공지/이벤트</a></li>
                    <li><a href="#">CSR 소식</a></li>
                    <li><a href="#">참여 후기</a></li>
                    <li><a href="#">보고서 다운로드</a></li>
                    <li><a href="#">포토갤러리</a></li>
                    <li><a href="#">뉴스레터</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /header -->
 
    <!-- main -->
    <div id="main">
        <div class="mainVisual">
            <div class="indicator">
                <a href="#visual1" class="on" onclick="return false;">1</a>
            </div>
            <button class="btnPrev" onclick="visualMove('prev');">PREV</button>
            <div class="mainVisualListWrap">
                <ul class="mainVisualList">
                    <li><a href="${result.lnkUrl }"><img onerror="this.src='./img/usr/common/no_img_170_120.gif';" id="visual1" src="/upfile/${result.fil720Path }/${result.fil720Nm }" alt="1" /></a></li>
                </ul>
            </div>
            <button class="btnNext" onclick="visualMove('next');">NEXT</button>
        </div>
        <div class="mainNews">
            <h2>CSR 소식</h2>
            <p class="seeAll"><a href="#"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
            <div class="scrollAreaY">
                <div class="scrollCont">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_news.gif" alt="CSR 소식 임시 이미지" /></span>
                                <strong>현대차, 함께 움직이는 세상 꿈꾼다.</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임의 수행을 통해 인간의...</span>
                                <span class="date">&#91;아시아&#47;태평양 &#124; 한국&#93; <span>&#124; 2012.05.08</span></span>
                            </a>
                            <p class="sns"><a href="#"><img src="/img/usr/temp/@main_news_sns.gif" alt="Sns Area" /></a></p>
                        </li>
                    </ul>
                </div>
                <div class="dragger"></div>
            </div>
        </div>
        <div class="mainGallery">
            <h2>포토 갤러리</h2>
            <p class="seeAll"><a href="#"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
            <div class="mainGalleryList">
                <div class="scrollAreaX">
                    <div class="scrollCont">
                        <ul >
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_1.jpg" alt="gallery image" /></a></li>
                            <li><a href="#" class="layOpen"><img src="/img/usr/temp/@main_gallery_2.jpg" alt="gallery image" /></a></li>
                        </ul>
                    </div>
                    <div class="dragger"></div>
                </div>
            </div>
        </div>
        <div class="mainReview">
            <h2>CSR 참여후기</h2>
            <p class="seeAll"><a href="#"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
            <div class="scrollAreaY">
                <div class="scrollCont">
                    <ul>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                        <li class="reviewList">
                            <a href="#">
                                <span class="figure"><img src="/img/usr/temp/@temp_main_review.gif" alt="Review Area" /></span>
                                <strong>현대차, 함께 움직이는 세상</strong>
                                <span>현대차는 자동차 문화를 선도하는 기업으로서 적극적인 사회적 책임...</span>
                                <span class="data">2012.04.23</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="dragger"></div>
            </div>
        </div>
        <div class="bottomArea">
            <div class="mainMovie">
                <h2>CSR 동영상</h2>
                <p class="seeAll"><a href="#"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
                <p class="movie"><a href="/img/usr/main/test.mp4" class="movieOpen"><img src="/img/usr/main/main_movie.gif" alt="Movie Area" /></a></p>
            </div>
            <div class="mainNotice">
                <ul class="noticeHeader">
                    <li><a href="#mainNtc">공지</a></li>
                    <li><a href="#mainEvt">이벤트</a></li>
                </ul>
                <p class="seeAll"><a href="#"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
                <ul id="mainNtc" class="noticeList">
                    <li><a href="#"><span class="flow"><em>[국내]</em>악천후에도 싼타페 기부약속</span><span class="reverse">&nbsp;04.23</span></a></li>
                    <li><a href="#"><span class="flow"><em>[국내]</em>악천후에도 싼타페 기부약속 지켰다</span><span class="reverse">&nbsp;04.23</span></a></li>
                    <li><a href="#"><span class="flow"><em>[국내]</em>악천후에도</span><span class="reverse">&nbsp;04.23</span></a></li>
                    <li><a href="#"><span class="flow"><em>[국내]</em>악천후에도 싼타페 기부약속 지켰다</span><span class="reverse">&nbsp;04.23</span></a></li>
                </ul>
                <ul id="mainEvt" class="noticeList">
                    <li><a href="#"><span class="flow"><em>[이벤트]</em>악천후에도 싼타페 기부약속</span><span class="reverse">&nbsp;04.23</span></a></li>
                    <li><a href="#"><span class="flow"><em>[이벤트]</em>악천후에도 싼타페 기부약속 지켰다</span><span class="reverse">&nbsp;04.23</span></a></li>
                    <li><a href="#"><span class="flow"><em>[이벤트]</em>악천후에도</span><span class="reverse">&nbsp;04.23</span></a></li>
                    <li><a href="#"><span class="flow"><em>[이벤트]</em>악천후에도 싼타페 기부약속 지켰다</span><span class="reverse">&nbsp;04.23</span></a></li>
                </ul>
            </div>
            <div class="mainStory">
                <h2><span>세상을 움직이는 현대자동차 글로벌</span> CSR 이야기</h2>
                <ul>
                    <li><a href="#"><span>지속가능 보고서</span></a></li>
                    <li><a href="#"><span>현대자동차 사회공헌 백서</span></a></li>
                    <li><a href="#"><span>현대자동차그룹 사회공헌 백서</span></a></li>
                </ul>
            </div>
            <div class="mainSns">
                <h2>facebook</h2>
                <ul class="snsLink">
                    <li><a href="#">세잎클로버</a></li>
                    <li><a href="#">글로벌 청년 봉사단</a></li>
                    <li><a href="#">H-volunteer Designer</a></li>
                </ul>
                <div class="faceArea">
                    <p class="prev"><a href="#"><img src="/img/usr/btn/btn_face_prev.gif" alt="이전" /></a></p>
                    <ul class="snsList">
                        <li class="current">
                            <a href="#" class="faceOpen">
                                <strong>현대자동차 글로벌 CSR</strong>
                                <span>세잎클로버찾기 희망댓글 이벤트 start!! 희망이 필요한 사람에게 용기를 줄 수 있는 방법에는 어떤 것들이 있을까요?</span>
                                <span class="figure"><img src="/img/usr/temp/@facebook_list_img.gif" alt="" /></span>
                                <span class="url">http://csr.hyundai.com/</span>
                            </a>
                            <a href="#" class="like"><img src="/img/usr/btn/btn_like.gif" alt="좋아요" /></a>
                        </li>
                        <li>
                            <a href="#" class="faceOpen">
                                <strong>현대자동차 글로벌 CSR</strong>
                                <span>세잎클로버찾기 희망댓글 이벤트 start!! 희망이 필요한 사람에게 용기를 줄 수 있는 방법에는 어떤 것들이 있을까요?</span>
                                <span class="figure"><img src="/img/usr/temp/@facebook_list_img.gif" alt="" /></span>
                                <span class="url">http://csr.hyundai.com/</span>
                            </a>
                            <a href="#" class="like"><img src="/img/usr/btn/btn_like.gif" alt="좋아요" /></a>
                        </li>
                        <li>
                            <a href="#" class="faceOpen">
                                <strong>현대자동차 글로벌 CSR</strong>
                                <span>세잎클로버찾기 희망댓글 이벤트 start!! 희망이 필요한 사람에게 용기를 줄 수 있는 방법에는 어떤 것들이 있을까요?</span>
                                <span class="figure"><img src="/img/usr/temp/@facebook_list_img.gif" alt="" /></span>
                                <span class="url">http://csr.hyundai.com/</span>
                            </a>
                            <a href="#" class="like"><img src="/img/usr/btn/btn_like.gif" alt="좋아요" /></a>
                        </li>
                    </ul>
                    <p class="next"><a href="#"><img src="/img/usr/btn/btn_face_next.gif" alt="다음" /></a></p>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- /main -->
 
    <!-- layer -->
    <div class="layer">
        <div class="mask"></div>
        <div class="layPop">
            <p class="btnClose"><button type="button">close</button></p>
            <div class="photoView">
                <p class="viewPrev"><a href="#"><img src="/img/usr/btn/btn_photo_view_left.png" alt="이전" /></a></p>
                <div class="photoCommentArea">
                    <p class="figure"><img src="/img/usr/temp/@img_photo_view.jpg" alt="photo gallery view" /></p>
                    <p class="viewTitle"><strong>보은군 노인장애인복지관</strong>&nbsp;<span>2012.05.07</span></p>
                    <p class="viewComment">HMA와 현대자동차 딜러들은 거동이 어려운 노인과 장애인을 위해서 시설을 재개발하여 좀 더 나은 이동공간을 확보할 수 있도록 하였다.</p>
                    <p class="sns"><img src="/img/usr/temp/@img_gallery_sns.jpg" alt="SNS" /></p>
                </div>
                <p class="viewNext"><a href="#"><img src="/img/usr/btn/btn_photo_view_right.png" alt="다음" /></a></p>
            </div>
        </div>
    </div>
    <!-- /layer -->
 
    <!-- facebook layer -->
    <div class="faceLayer">
        <div class="mask"></div>
        <div class="faceLayPop">
            <p class="btnClose"><button type="button">close</button></p>
            <div class="faceView">
                <p class="viewPrev"><a href="#"><img src="/img/usr/btn/btn_photo_view_left.png" alt="이전" /></a></p>
                <div class="faceLayerArea">
                    <strong>현대자동차 글로벌 CSR</strong>
                    <span>세잎클로버찾기 희망댓글 이벤트 start!! 희망이 필요한 사람에게 용기를 줄 수 있는 방법에는 어떤 것들이 있을까요?</span>
                    <span class="figure"><img src="/img/usr/temp/@facebook_list_img.gif" alt="" /></span>
                    <span class="url">http://csr.hyundai.com/</span>
                    <a href="#" class="like"><img src="/img/usr/btn/btn_like.gif" alt="좋아요" /></a>
                    <span class="likeNo"><em>177명</em>이 좋아합니다.</span>
                </div>
                <p class="viewNext"><a href="#"><img src="/img/usr/btn/btn_photo_view_right.png" alt="다음" /></a></p>
            </div>
        </div>
    </div>
    <!-- /facebook layer -->
 
    <!-- movie layer -->
    <div class="movieLayer">
        <div class="mask"></div>
        <div class="movieLayPop">
            <p class="btnClose"><button type="button">close</button></p>
            <div class="movieView">
                <video id="mainPlayer" class="projekktor" poster="/img/usr/main/main_movie.gif" title="현대자동차 CSR 영상보기" width="640" height="360" controls>
                    <source src="/img/usr/main/test.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </div>
    <!-- /movie layer -->
 
    <!-- footer -->
    <div id="footer">
        <div id="footContents">
            <div class="flow">
                <p class="copy">COPYRIGHT&copy; 2012 HYUNDAI MOTOR COMPANY ALL RIGHTS RESERVED.</p>
                <ul class="footMenu">
                    <li><a href="#">개인정보처리방침</a></li>
                    <li><a href="#">저작권 안내</a></li>
                    <li><a href="mailto:CSR@hyundai.com">관리자 문의</a></li>
                    <li><a href="/html/usr/KU06_007.html">사이트맵</a></li>
                </ul>
            </div>
            <div class="reverse">
                <div class="selectArea selFoot">
                    <p class="selFrm"><a href="#">Family Site</a></p>
                    <ul>
                        <li><a href="http://www.naver.com" target="_blank">현대자동차</a></li>
                        <li><a href="http://www.naver.com" target="_blank">현대자동차그룹</a></li>
                        <li><a href="http://www.naver.com" target="_blank">로보카폴리 교통안전</a></li>
                        <li><a href="http://www.naver.com" target="_blank">해피웨이 드라이브</a></li>
                        <li><a href="http://www.naver.com" target="_blank">현대 그린존</a></li>
                        <li><a href="http://www.naver.com" target="_blank">윤리경영</a></li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- /footer -->
</div>
</body>
</html>